<template>
  <div :class="styles.comp">
    <h1>{{ msg }}</h1>
    <div class="card">
      <el-button type="primary" @click="handleCount">
        count is {{ count }}
      </el-button>
    </div>
    <p :class="styles.readTheDocs">This component is Hello World Vue</p>
    <slot name="extra" />
    <p>内部引用：{{ contentComputed }}</p>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  SlotsType,
  toRefs,
  watch
} from 'vue'

import { useMainStore } from '@/store'

import { helloWorldVueProps } from './HelloWorldVue.constant'

export default defineComponent({
  name: 'HelloWorldVue',
  props: helloWorldVueProps(),
  emits: {
    /**
     * 组件加载事件
     * @param {string} msg 消息
     */
    mounted: (msg: string) => true
  },
  slots: Object as SlotsType<{
    /**
     * 自定义额外内容
     */
    extra: () => any
  }>,
  setup(props, { emit }) {
    const state = reactive({
      count: 0
    })

    const mainStore = useMainStore()

    const contentComputed = computed(() => mainStore.content)

    function handleCount() {
      state.count++
    }

    function clear() {
      state.count = 0
    }

    watch(
      () => state.count,
      (newValue, oldValue) => {
        console.log('count: ', newValue)
      },
      {
        deep: false,
        immediate: false
      }
    )

    onMounted(() => {
      emit('mounted', 'Mounted: HelloWordVue')
    })

    return {
      ...toRefs(state),
      contentComputed,
      handleCount,
      clear
    }
  }
})
</script>

<style module="styles">
.comp {
  width: 320px;
  padding: 10px;
  border: 8px solid #333;
}

.readTheDocs {
  color: #888;
}
</style>
